<template>
    <div>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
            
        </el-table-column>
        <el-table-column label="图片" width="120">
            <template slot-scope="scope">
                <img :src="'http://localhost:5141/' + scope.row.productImage" style="width:50px;" />
            </template>
        </el-table-column>
        <el-table-column prop="productName" label="姓名">
        </el-table-column>
        <el-table-column prop="productPrice" label="价格" width="120">
        </el-table-column>
        <el-table-column label="数量" width="180">
            <template slot-scope="scope">
                <el-input-number size="mini" v-model="scope.row.productNumber" @change="handleChange(scope.row)" :min="1" :max="100"
                    label="描述文字"></el-input-number>
            </template>
        </el-table-column>
        <el-table-column label="小计" width="120">
            <template slot-scope="scope">
                {{ scope.row.productNumber * scope.row.productPrice }}
            </template>
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip>
        </el-table-column>
    </el-table>
    <div>总价：{{ total }}</div>
</div>
</template>
  
<script>
export default {
    data() {
        return {
            tableData: [],
            multipleSelection: []
        }
    },
    mounted() {
        this.onLoadData()
    },
    //计算属性
    computed:{
        //计算选中商品的总价格
        total(){
            let sum = 0
            this.multipleSelection.forEach(x=>{
                sum += x.productNumber * x.productPrice
            })
            //判断运费
            if(sum>0 && sum<100)
                sum += 8
            return sum.toFixed(2)
        }
    },
    methods: {
        //数量的修改事件
        handleChange(row) {
            console.log(row)
            let url = 'http://localhost:5141/car'
            let data = row
            this.$http.put(url, data).then(res => {
                console.log(res)
            })
        },
        //加载购物车数据
        onLoadData() {
            let memberid = localStorage.getItem('login-userinfo')
            let url = 'http://localhost:5141/car'
            this.$http.get(url, {
                params: {
                    memberId: memberid
                }
            }).then(res => {
                console.log(res)
                this.tableData = res.data.data
            })
        },

        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    }
}
</script>